<template>
  <div>
    <van-nav-bar fixed>
      <template #left>
        <!-- <img src="@/assets/logo1.png" alt="" /> -->
      </template>
      <template #right>
        <van-icon
          name="search"
          size="0.48rem"
          color="#fff"
          @click="$router.push('/Search')"
        />
      </template>
    </van-nav-bar>
    <div class="main">
      <van-tabs
        v-model="activeId"
        sticky
        animated
        offset-top="1.226667rem"
        @change="changeFn"
      >
        <van-tab
          v-for="item in titleName"
          :key="item.id"
          :title="item.name"
          :name="item.id"
        >
          <artiCleList :channeId="activeId" />
        </van-tab>
      </van-tabs>
    </div>
    <van-icon
      name="plus"
      size="0.37333334rem"
      class="moreChannels"
      @click="showPlus = true"
    />
    <!-- 频道的选择弹出层 -->
    <van-popup v-model="showPlus" position="bottom" :style="{ height: '100%' }">
      <ChannelEdit
        :user-channel="titleName"
        :un-userchanne="unChannelsAPI"
        @moreFn="moreFn"
        @deleteItem="deleteItem"
        @clseFn="showPlus = false"
        v-model="activeId"
      />
    </van-popup>
  </div>
</template>

<script>
// 重点：滚动条位置设置：  监听窗口事件，设置一个空对象，里面存上对应的频道id和滚动条位置，然后等切换的时候赋值给页面的高度
// updateChannelsApi
import {
  userChannelAPI,
  getAllChannelsAPI,
  updateChannelsApi,
} from '@/api/index'
import artiCleList from '@/views/Home/components/ArticleList.vue'
import ChannelEdit from '@/views/Home/channelEdit.vue'
export default {
  name: 'HmttIndex',

  data() {
    return {
      titleName: [], // 已选用户的频道
      AllChannelsAPI: [], // 所有的频道列表
      activeId: 0, // tab下标
      acyiveList: [], // 文章列表
      showPlus: false,
      openScrollTop: {}, // 用一个对象记录所有频道的滚动值高度，因为每个频道的高度都不一样
    }
  },
  components: {
    artiCleList,
    ChannelEdit,
  },
  created() {
    this.getUserChannel()
    this.getAllChannels()
  },
  watch: {
    // activeId: {
    //   deep: true,
    //   immediate: true,
    //   handler (val) {
    //     if (val) {
    //       // document.documentElement.scrollTop = this.openScrollTop[val]
    //       console.log(val)
    //     }
    //   }
    // }
  },
  // 因为用了keep-alive所以有这个生命周期，created生命周期因为用了缓存，所以 不在执行
  // window.addEventListener  监听滚动事件，调用这个方法
  activated() {
    window.addEventListener('scroll', this.getScrollTop)
    // 用原生==》js把滚动条的位置从路由信息里面拿出，赋值，实现跳回来的时候滚动条的高度还在原来离开的位置，销毁的时候移除滚动条的监听
    document.documentElement.scrollTop = this.$route.meta.scrollTop
  },
  computed: {
    unChannelsAPI() {
      // // 1.0--filte大的数据进行筛选，小的数组进行特定条件的查找,返回true是保留，返回false是丢弃
      // return this.AllChannelsAPI.filter(bigObj => {
      //   const index = this.titleName.findIndex(samobj => samobj.id === bigObj.id)
      //   // 大于-1就是找到了，如果找到返回对应的索引值就丢弃，没找到就是不重复的就保留
      //   if (index > -1) {
      //     return false
      //   } else {
      //     return true
      //   }
      // })

      // 上面的简化代码
      return this.AllChannelsAPI.filter(
        (bigObj) =>
          this.titleName.findIndex((samobj) => samobj.id === bigObj.id) === -1
      )
    },
  },
  methods: {
    // tab改变的时机,把存的id的滚动高度给页面高度赋值
    changeFn() {
      /** 有个坑，vant组件在切换tab的时候会把切过去的tab页高度设为0，所以给滚动条设置高度没用，得等渲染完后才可以赋值 */
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.openScrollTop[this.activeId]
      })
    },
    // 获取页面的滚动条高度，赋值给route里面的信息
    // 因为频道不一样，所以需要动一个openScrollTop对象记录每个频道的滚动高度，下标为key，高度为页面滚动高度
    getScrollTop() {
      // this.$route.meta.scrollTop = document.documentElement.scrollTop
      this.openScrollTop[this.activeId] = document.documentElement.scrollTop
    },
    // 1.0  获取已选用户的频道
    async getUserChannel() {
      const {
        data: { data },
      } = (await userChannelAPI()) || {}
      this.titleName = data?.channels || []
    },
    // 2.0获取所有的频道列表
    async getAllChannels() {
      const {
        data: {
          data: { channels },
        },
      } = await getAllChannelsAPI()
      this.AllChannelsAPI = channels
    },
    // 新增频到
    async moreFn(item) {
      this.titleName.push(item)
      const arrlist = this.titleName.filter((item) => item.id !== 0)
      const resultList = arrlist.map((item, index) => {
        const newObj = { ...item }
        delete newObj.name
        newObj.seq = index + 1
        return newObj
      })
      const { data } = await updateChannelsApi({ channels: resultList })
      console.log(data, 'data')
    },
    // 删除频道
    async deleteItem(it) {
      const list = this.titleName.findIndex((item) => item.id === it.id)
      this.titleName.splice(list, 1)
      const arrlist = this.titleName.map((item, index) => {
        const itemObj = { ...item }
        delete itemObj.name
        itemObj.seq = index + 1
        return itemObj
      })
      const { data } = await updateChannelsApi({ channels: arrlist })
      console.log(data, 'data')
    },
  },
  // 销毁的时候移除滚动条的监听，this.getScrollTop不要加（），要不就是调用，因为监听的是一个函数体
  destroyed() {
    window.removeEventListener('scroll', this.getScrollTop)
  },
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #007bff;
}
img {
  width: 100%;
  height: 30px;
}
.main {
  padding: 46px 0 50px 0;
}
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
</style>
